<template>
	<view class="root f1 oh">
		<view class="navigation height-100 fd-row jc-sa bgc-fff">
			<label
				v-for="(tab, index) in tabs"
				:key="index"
				:class="[{ active: tabIndex === index }, 'fs-30', 'lh-80', 'relative']"
				@click="switchTab(index)"
			>
				{{ tab }}
			</label>
		</view>

		<label class="bgc-fff br-34" :style="{ margin: `12rpx 30rpx`, padding: `12rpx 30rpx` }">
			<uni-icons type="search" color="#ccc" />
			<input
				:style="{ zIndex: 0 }"
				class="f1 ml-12 color-28 fs-30"
				type="text"
				placeholder="输入订单号、手机号搜索"
				confirm-type="search"
				placeholder-style="color: #ccc"
				v-model="keywords"
				@confirm="search"
			/>
		</label>

		<scroll-view @scrolltolower="getListData" scroll-y class="f1 oh">
			<label class="height-20" />
			<block v-for="(order, index) in orders.list" :key="index">
				<view
					:style="{ padding: `20rpx`, margin: `0 20rpx` }"
					class="order br-20 bgc-fff"
					hover-class="none"
				>
					<view class="fd-row ai-center jc-sb mb-16">
						<text class="fs-24">
							<text class="color-333"> 订单编号： </text>
							<text class="color-999"> {{ order.order_num }} </text>
						</text>
						<view
							v-if="order.phoneNumber"
							class="fd-row ai-center"
							hover-class="tap-hover"
							hover-stay-time="90"
							@click="callPhone(order.phoneNumber)"
						>
							<uni-icons class="mr-6" type="phone-filled" size="12" color="#999" />
							<text class="color-999 fs-24">{{ order.phoneNumber }}</text>
						</view>
					</view>
					<view
						v-for="commodity in order.con"
						:key="commodity.id"
						:style="{ borderBottom: `1rpx solid #f5f5f5` }"
						class="fd-row pt-16 pb-16"
					>
						<image
							:style="{ width: `136rpx`, height: `136rpx` }"
							class="bgc-eee br-8"
							:src="commodity.cover_image"
							mode="aspectFill"
						/>
						<view class="ml-30 jc-sa">
							<text class="fs-30">{{ commodity.name }}</text>
							<label class="fs-28">
								<text>
									<text class="color-999">数量：</text>
									<text class="color-333">{{ commodity.num }}</text>
								</text>
								<text class="ml-30">
									<text class="color-999">价格：</text>
									<text class="color-fa0707">¥{{ commodity.price }}</text>
								</text>
							</label>
						</view>
					</view>

					<view class="fd-row ai-center mt-18">
						<text class="fs-24 f1">
							<text class="color-333">下单时间： </text>
							<text class="color-999">{{ order.createtime_text }}</text>
						</text>

						<view class="fd-row ai-center">
							<button
								v-if="!tabIndex"
								hover-class="tap-hover"
								class="bgc-f5f5f5 border-none color-666 br-28 fs-26 pl-18 pr-18 lh-2 ml-6 mr-0"
								:plain="true"
								:disabled="Number(order.verification)"
								@click="takeBack(index)"
							>
								已取回
							</button>
						</view>
					</view>
				</view>
				<label class="height-20" />
			</block>

			<uni-load-more :status="loadStatus" />
		</scroll-view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";

	let requestFlag: boolean = false;
	@Component({
		filters: {
			statusText(status: number) {
				return ["未支付", "已支付", "已取消", "活动中"][status];
			},
		},
	})
	export default class OrderList extends Vue {
		// component property
		tabs: string[] = ["自提订单", "配送订单", "其他订单"];
		tabIndex: number = -1;
		orders: Pager<AnyObject> = { page: 1, list: [], size: 18 };
		loadStatus: string = "loading";
		keywords: string = "";

		onLoad({ tab = "-1" }: { tab: string }) {
			this.switchTab(+tab + 1);
		}

		switchTab(index: number) {
			if (requestFlag || this.tabIndex === index) return;
			this.tabIndex = index;
			this.keywords = "";
			this.search();
		}

		search() {
			this.orders.list = [];
			this.orders.page = 1;
			this.getListData();
		}

		getListData() {
			const { $request, orders, keywords } = this;

			if (requestFlag || !orders.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/shop/shopPersonalList", {
					type: this.tabIndex,
					page: orders.page,
					size: orders.size,
					keywords,
				})
				.then(({ data }) => {
					orders.list.push(...data.data);
					orders.page = data.current_page < data.last_page ? ++data.current_page : 0;
					this.loadStatus = orders.page ? "more" : "noMore";
				})
				.finally(() => (requestFlag = false));
		}
		takeBack(index: number) {
			uni.showLoading({ title: "Loading..." });
			const { list } = this.orders;
			this.$request.get("/shop/upMethod", { id: list[index].id }).then(({ msg: title }) => {
				list[index].verification = 1;
				uni.showToast({ title });
			});
		}

		callPhone(phoneNumber: string) {
			uni.makePhoneCall({ phoneNumber });
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.navigation {
		z-index: 9;
		color: #999;
		.active {
			color: #1b1b1b;
			&::after {
				content: "";
				position: absolute;
				width: 80%;
				height: 9rpx;
				background-image: linear-gradient(-90deg, #333, #1b1b1b);
				border-radius: 5rpx;
				bottom: 9rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>